<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
<head th:include="admin/common/resource ::commonHead('编辑管理员')" ></head>
<style>
    .layui-form-item .layui-input-inline{
        margin-left: 30px;
    }
    .layui-form-item .layui-form-label{
        padding: 2px 0px;
    }
</style>
<script>
    function loadPage(url) {
        window.location.href = url;
    }
</script>
<head>
    <title>编辑</title>
</head>

<body>

<div class="container" style="margin-left: 0px">
    <div class="toolbar btn-group-sm" role="toolbar" >
        <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 权限管理 / 编辑管理员 </h6>
        <div class="btn-group btn-group-toggle" data-toggle="buttons" style="margin-bottom: 16px">
            <label shiro:hasPermission="manager:list" class="btn btn-secondary btn-sm" onclick="loadPage('/admin/manager/list')">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> 管理员列表
            </label>

            <label shiro:hasPermission="manager:edit" class="btn btn-secondary btn-sm active">
                <input type="radio" name="options" id="option3" autocomplete="off"> 编辑管理员
            </label>
        </div>
    </div>

    <form class="layui-form" action="/admin/manager/save" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id" th:value="${user.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">管理员账号</label>
            <div class="layui-input-block">
                <input type="text" name="account" required th:value="${user.account}" lay-verify="required" placeholder="请输入管理员登录账号"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">管理员姓名</label>
            <div class="layui-input-block">
                <input type="text" name="realname" th:value="${user.realname}" required  lay-verify="required" placeholder="请输入管理员姓名"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required th:value="${user.phone}"  lay-verify="required" placeholder="请输入管理员手机号码"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required  lay-verify="required" placeholder="请设置密码"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="rePassword" required  lay-verify="required" placeholder="请输入确认密码"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男" th:checked="${user.gender}==1" >
                <input type="radio" name="gender" value="2" title="女" th:checked="${user.gender}==2" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">管理员角色</label>
            <div class="layui-input-block">
                <input class="roleId"
                       th:each="role:${roleList}"
                       type="checkbox" name="role[]"
                       th:value="${role.id}"
                       th:checked="${roleIds.contains(role.id)}"
                       th:title="${role.roleName}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="state" lay-skin="switch" th:checked="${user.status}==1" >
            </div>
        </div>

        <div class="layui-form-item" >
            <label for="file">管理员头像</label>
            <div class="layui-input-block">
                <div class="layedit-tool-image" id="image" style="margin-bottom: 10px" >
                    <img th:src="${imageService+user.avatar}" style="height: 80px" alt="">
                </div>
                <button type="button" class="layui-btn" id="file">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <input id="icon" type="hidden" name="avatar" value="">
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</body>
<script th:src="@{/layui/layui.all.js}"></script>
<script>

    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#file' //绑定元素
            ,url: '/admin/manager/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.status == 1){
                   $("#icon").val(res.path)
                   $("#image").html("<image style='height: 80px' src='[[${imageService}]]/"+res.path+"' >")
                }else{
                    lay.msg("上传失败");
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            if(data.field.password != data.field.rePassword){
                layer.msg("两次密码不一致");
                return false;
            }

            var user = {
                id:data.field.id,
                account:data.field.account,
                realname:data.field.realname,
                phone:data.field.phone,
                gender:data.field.gender,
                status:data.field.state=='on'?1:0,
                avatar:data.field.avatar,
                password:data.field.password
            };

            var roles = [];

            $('.roleId').each(function() { //遍历所有复选框
                if ($(this).prop('checked') == true) {
                    roles.push($(this).val());
                }
            });

            $.ajax({
                url: "/admin/manager/save",
                type:'post',
                contentType:'application/json;charset=UTF-8',
                data: JSON.stringify({
                    user:user,
                    roles:roles
                }),
                success: function (res) {
                    if(res.code == 1){
                        layer.msg("保存成功!",function () {
                            window.location.href="/admin/manager/list";
                        },2000)
                    }
                },
                error:function (err) {
                    layer.msg("保存失败")
                }
            })
            return false;
        });
    });
</script>
</html>